<template>
	<view class="df_change_password">
		<u-form :model="passInfo" ref="passInfoForm">
			<u-form-item label="手机号" prop="phone" label-width="180">
				<u-input v-model="passInfo.phone" placeholder="请输入绑定的手机号码" />
			</u-form-item>
			<u-form-item label="验证码" prop="code" label-width="180">
				<u-input v-model="passInfo.code" placeholder="请输入验证码" />
				<view slot="right">
					<u-verification-code :seconds="seconds" ref="uCode" @change="codeChange"></u-verification-code>
					<text style="color: #41c5aa;" @click="getCode">{{tips}}</text>
				</view>
		
			</u-form-item>
			<u-form-item label="新密码" prop="newPassword" label-width="180">
				<u-input v-model="passInfo.newPassword" placeholder="请输入新的密码"/>
			</u-form-item>
			<u-form-item label="确认密码" prop="conPassword" label-width="180">
				<u-input v-model="passInfo.conPassword" placeholder="请再次输入密码"/>
			</u-form-item>
		</u-form>
		<view @click="submitInfo" class="submit_info">
			<text>确定</text>
		</view>
	</view>
</template>

<script>
	import {checkPhone} from '@/utils/utils.js'
	export default {
		onReady() {
			this.$refs.passInfoForm.setRules(this.rules);
		},
		data() {
			return {
				seconds: 60,
				tips: "",
				passInfo: {
					phone: '',
					code: '',
					newPassword: '',
					conPassword: ''
				},
			}
			rules: {
	
			}
		},
		methods: {
			codeChange(text) {
				this.tips = text;
			},
			getCode() {
				if(!checkPhone(this.passInfo.phone)){
					uni.showToast({
						title: '手机号格式错误',
						icon: 'none',
						duration: 1000
					})
					return false
				}
				if (this.$refs.uCode.canGetCode) {
					uni.hideLoading();
					this.$refs.uCode.start();
				} else {
					this.$u.toast('请倒计时结束后再发送');
				}
			},
			submitInfo() {
				this.$refs.passInfoForm.validate(valid => {
					if (valid) {
						console.log('验证通过');
					} else {
						console.log('验证失败');
					}
				});
			}
		},
	}
</script>

<style lang="scss">
	.df_change_password {
		padding: 30rpx;

		.submit_info {
			margin-top: 300rpx;
			width: 690rpx;
			height: 90rpx;
			line-height: 90rpx;
			text-align: center;
			font-size: 36rpx;
			color: #fff;
			background: linear-gradient(-74deg, #70DAC4, #3EC4A7);
			box-shadow: 0px 5rpx 12rpx 1rpx rgba(68, 198, 170, 0.3);
			border-radius: 45rpx;

		}
	}
</style>
